<template>
  <div>
    <div class="topBox">
      <ul class="topNav">
        <li
          v-for="(item, idx) in topData"
          :key="idx"
          :class="{ currentTopNav: currentTop == idx }"
          @click="changeFindTop(idx)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "findTopNav",
  data() {
    return {
      currentTop: 0,
      topData: [
        {
          name: "精品晒单",
          path: "/find_share",
        },
        {
          name: "交流",
          path: "/find_communication",
        },
        {
          name: "视频",
          path: "/find_vidio",
        },
      ],
    };
  },
  methods:{
      changeFindTop(idx){
        this.$router.push({
          path:this.topData[idx].path,
          query:{currentTop:idx,active:2}
        })
      }
  },
  mounted(){
    this.currentTop=this.$route.query.currentTop
  }
};
</script>
<style lang="less" scoped>
.topBox {
  height: 0.38rem;
  background: #ffffff;
}
.topNav {
  width: 3.43rem;
  height: 0.38rem;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  line-height: 0.38rem;
  li {
    font-size: 0.14rem;
    color: #666666;
  }
  .currentTopNav {
    font-size: 0.18rem;
    color: #1b7373;
    position: relative;
  }
  .currentTopNav::after {
    content: "";
    width: 100%;
    height: 0.02rem;
    background: #1b7373;
    border-radius: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>